.page-title{
  height: 45px;
  line-height: 35px;
  padding: 10px 14px 0;
  font-weight: bold;
  color: #333333;
}
#main-view{
 .list-item{
   .base-info{
     height: 64px;
     background-color: #ffffff;
     padding: 0 14px;
   }
   .item-left{
     padding-right: 15px;
     .header{
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: no-repeat center;
       background-size: cover;
       background-color:#E4E4E4 ;
     }
   }
   .right-num{
     padding-right: 24px;
     position: relative;
   }
   .right-info{
     .name{
  color: #333333;
     }
     .job{
       margin-top: 2px;
       color: #999999;
     }
   }
   .item-right{
     height: 64px;
     border-bottom:1px solid #E4E4E4;
   }
   &:last-of-type{
     .item-right{
       border-bottom:none;
     }
   }
  &.active{
    .small-list{
      display: block;
    }
    .item-right{
      border-bottom:none;
      .icon{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
      }
    }
  }
 }
  .item-right{
    color: #666;
    .icon{
      font-weight: bold;
      position: absolute;
      font-size:18px;
      right: 0;
      top: 2px;
      color: #D4D4D4;
      -webkit-transform: rotate(0);
     transform: rotate(0);
      transition: -webkit-transform 200ms;
      transition: transform 200ms;
    }
  }
  .small-list{
    display: none;
    padding-left: 14px;
    p{
      line-height: 40px;
      color: #333;
      border-bottom: 1px solid #E4E4E4;
      &:last-of-type{
        border-bottom: none;
      }
    }
  }
}